<template>
  <div class="table-wrapper">
    <div class="dialog-wrapper">
      <Dialog ref="dialog" @closeDialog="handleCloseDialog">
        <template>
          <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
            <el-form-item label="拒绝理由：" prop="remark">
              <el-input v-model="ruleForm.remark" type="textarea" />
            </el-form-item>
          </el-form>
        </template>
      </Dialog>
    </div>
    <div class="table-title">
      <ul>
        <li>业务员</li>
        <li>商品</li>
        <li>申请数量</li>
        <li>申请时间</li>
        <li>操作</li>
      </ul>
    </div>
    <div v-if="list.length" class="table-content">
      <div v-for="item of list" :key="item.id" class="table-cell">
        <ul>
          <li>
            <div class="img-wrapper">
              <img :src="item.user_info.avatar" alt style="height: 100%; width: auto">
            </div>
            <div class="text">
              <p>{{ item.user_info.nickname }}</p>
              <p>{{ item.user_info.username }}</p>
            </div>
          </li>
          <li>
            <ul>
              <li v-for="(secItem, index) of item.commodity" :key="index">
                <div class="img-wrapper">
                  <img :src="secItem.img_show" alt style="height: 100%; width: auto">
                </div>
                <p>{{ secItem.name }}</p>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li v-for="(secItem, index) of item.commodity" :key="index">
                <p>{{ secItem.number }}</p>
              </li>
            </ul>
          </li>
          <li>
            <p>{{ item.created_at }}</p>
          </li>
          <li>
            <span class="mr blue" @click="agreeClick(item)">同意</span>
            <span class="red" @click="refuseClick(item)">拒绝</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="noResult">暂无数据</div>
  </div>
</template>
<script>
import Dialog from '@/common/dialog'

export default {
  components: {
    Dialog
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ruleForm: {
        remark: ''
      },
      id: ''
    }
  },
  mounted() {
    this.addClass('.table-wrapper .table-content .table-cell>ul>li:nth-child(2)>ul>li')
    this.addClass('.table-wrapper .table-content .table-cell>ul>li:nth-child(3)>ul>li')
  },
  methods: {
    refuseClick(item) {
      this.$refs.dialog.show()
      this.id = item.id
    },
    agreeClick(item) {
      this.$emit('agree', item.id)
    },
    handleCloseDialog() {
      this.$emit('confirm', this.id, this.ruleForm.remark)
    },
    addClass(selector) {
      const oLi = document.querySelectorAll(selector)
      this.list.forEach((item, index) => {
        if (item.commodity.length > 1) {
          for (let i = 0; i <= oLi.length - 2; i++) {
            oLi[i].classList.add('borderBottom')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
p {
  margin: 0;
}
.table-wrapper {
  width: 100%;
  .table-title {
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    background-color: rgba(250, 250, 250, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    border: 1px solid rgba(235, 238, 245, 1);
    ul {
      display: flex;
      align-items: center;
      li {
        border-right: 1px solid rgba(235, 238, 245, 1);
        padding-left: 20px;
        box-sizing: border-box;
        white-space: nowrap;
        &:nth-child(1) {
          width: 20%;
        }
        &:nth-child(2) {
          width: 30%;
        }
        &:nth-child(3) {
          width: 10%;
        }
        &:nth-child(4),
        &:nth-child(5) {
          width: 20%;
        }
      }
    }
  }
  .table-content {
    width: 100%;
    border-right: 1px solid rgba(235, 238, 245, 1);
    border-left: 1px solid rgba(235, 238, 245, 1);
    .table-cell {
      width: 100%;
      height: 100%;
      border-bottom: 1px solid rgba(235, 238, 245, 1);
      & > ul {
        height: 100%;
        display: flex;
        align-items: center;
        & > li {
          border-right: 1px solid rgba(235, 238, 245, 1);
          padding-left: 20px;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          height: 80px;
          &:nth-child(1) {
            width: 20%;
            display: flex;
            align-items: center;

            .img-wrapper {
              width: 54px;
              height: 54px;
              border-radius: 27px;
              overflow: hidden;
              margin-right: 10px;
              img {
                width: 100%;
              }
            }
            .text {
              p {
                width: 61px;
                height: 23px;
                line-height: 23px;
                color: rgba(102, 102, 102, 1);
                font-size: 14px;
                text-align: left;
                font-family: Roboto;
              }
            }
          }
          &:nth-child(2) {
            width: 30%;
            height: 100%;
            padding-left: 0;
            & > ul {
              display: flex;
              flex-direction: column;
              height: 100%;
              & > li {
                display: flex;
                align-items: center;
                padding: 10px 20px;
                // border-bottom: 1px solid rgba(235, 238, 245, 1);
                box-sizing: border-box;
                .img-wrapper {
                  width: 60px;
                  height: 60px;
                  margin-right: 10px;
                  overflow: hidden;
                  img {
                    width: 100%;
                  }
                }
                p {
                  height: 23px;
                  line-height: 23px;
                  color: rgba(102, 102, 102, 1);
                  font-size: 14px;
                  text-align: left;
                  font-family: Roboto;
                }
              }
            }
          }
          &:nth-child(3) {
            width: 10%;
            height: 100%;
            padding-left: 0;
            & > ul {
              display: flex;
              flex-direction: column;
              height: 100%;
              & > li {
                display: flex;
                align-items: center;
                padding: 10px 20px;
                box-sizing: border-box;
                // border-bottom: 1px solid rgba(235, 238, 245, 1);
                box-sizing: border-box;
                height: 80px;
                p {
                  color: rgba(102, 102, 102, 1);
                  font-size: 14px;
                  text-align: left;
                  font-family: Roboto;
                }
              }
            }
          }
          &:nth-child(4),
          &:nth-child(5) {
            width: 20%;
            display: flex;
            align-items: center;
            p {
              color: rgba(102, 102, 102, 1);
              font-size: 14px;
              text-align: left;
            }
            span {
              padding: 5px 10px 5px 0;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .noResult {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border-bottom: 1px solid  rgba(235, 238, 245, 1);
      border-left: 1px solid  rgba(235, 238, 245, 1);
      border-right: 1px solid  rgba(235, 238, 245, 1);
    }
}
.mr {
  margin-right: 50px;
}

.red {
  color: #f56c6c;
}
.blue {
  color: #409eff;
}
.dialog-wrapper /deep/ .el-dialog{
  min-width: 530px;
  min-height: 320px;
}
.dialog-wrapper /deep/ .el-textarea{
  textarea{
    width: 400px;
    height: 137px;
  }
}
.borderBottom{
  border-bottom: 1px solid rgba(235, 238, 245, 1);
}
</style>
